<template>
<div class="choose-userlist">
  <el-dialog custom-class="wlm-form-dialog dialog-table" width="30%" :visible.sync="dialogTableVisible" @close="output">
    <div class="wlm-dialog-fixheader">
      <span class="wlm-dialog-inlenr">{{this.title}}<slot name="title"></slot></span>
    </div>
    <el-scrollbar>
      <div class="wlm-table-content">
        <div class="wlm-dialog-main">
          <el-tabs v-model="activeName">
            <el-tab-pane v-if="params.imgPath" label="二维码" name="imgPath"></el-tab-pane>
            <el-tab-pane v-if="params.weChatQr" label="二维码" name="weChatQr"></el-tab-pane>
            <el-tab-pane v-if="params.appQr" label="小程序码" name="appQr"></el-tab-pane>
            <el-tab-pane v-if="params.qrUrl || params.linkUrl" label="链接" name="linkpath"></el-tab-pane>
          </el-tabs>
          <div class="wlm-table no-bg">
            <div class="warning" v-if="isQrcode">
              <div class="flex-row flex-justify-b flex-align-c">
                <p>扫一扫，在手机查看并分享</p>
                <!-- <el-button type="text" style="padding:0">帮助</el-button> -->
              </div>
            </div>
            <div class="warning" v-if="activeName=='linkpath'">
              <div class="flex-row flex-justify-b flex-align-c">
                <p>分享才有更多人看到哦</p>
              </div>
            </div>
            <div class="wlm-form">
              <section>
                <div class="wlm-form-content" style="padding:0 20px;">
                  <el-form
                      v-if="formFormatData.formData"
                      :ref="formFormatData.key"
                      :model="formFormatData.formData"
                      :rules="formFormatData.rules"
                                        size="small"
                      label-width="140px"
                      class="retail-form"
                      label-position="top">
                    <el-form-item label="" v-if="isQrcode" style="margin-bottom:20px;">
                      <div class="flex-col flex-justify-c flex-align-c" style="margin-bottom:-20px;">
                        <div v-if="isQrcode" v-loading="!isQrcode" style="width:220px;height:220px">
                          <img v-if="$path"  width="220" height="220" :src="$path">
                        </div>
                        <div v-else style="width:220px;height:220px;"></div>
                        <a class="el-button el-button--text el-button--medium" :href="getPath($path)" download>下载二维码</a>
                      </div>
                    </el-form-item>
                    <slot name="el-form-item" v-if="activeName=='linkpath'"></slot>
                    <!-- shareLinkConfig.params.qrUrl -->
                    <!-- <el-form-item label="页面链接" v-if="activeName=='linkpath'">
                      <slot>直接弹出购买界面的链接</slot>
                      <el-input readonly placeholder="请输入内容" v-model="qrUrl" class="input-with-select">
                        <el-button slot="append" @click="handleClipboard(qrUrl,$event)">复制</el-button>
                      </el-input>
                    </el-form-item> -->
                    <!-- <el-form-item label="直接弹出购买界面的链接" v-if="activeName=='linkpath'">
                      <div class="flex-col flex-align-c">
                        <el-input readonly placeholder="请输入内容" v-model="linkUrl" class="input-with-select">
                          <el-button slot="append" @click="handleClipboard(linkUrl,$event)">复制</el-button>
                        </el-input>
                      </div>
                    </el-form-item> -->
                  </el-form>
                </div>
              </section>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
    <div class="wlm-dialog-fixfooter">
      <span slot="footer" class="dialog-footer">
                  <el-button size="small" @click="toggle">取 消</el-button>
                  <el-button size="small" type="primary" @click="toggle">确 定</el-button>
              </span>
    </div>
  </el-dialog>
</div>
</template>

<script>
// import {
//   goodsclassIndex
// } from '@/api/merchandise'
import clipboard from '@/utils/clipboard'
import mixins from '@/mixins/mixins'
import defaultConfig from './utils/config'
export default {
  mixins: [defaultConfig.mixins, mixins.getters('Form')],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    },
    title: {
      type: String,
      default: '推广分享'
    }
  },
  watch: {
    'config.current': {
      handler(newData, oldData) {
        if (typeof newData === 'string' && newData.length > 0) {
          this.activeName = newData
        }
      },
      immediate: true,
      deep: false
    }
  },
  data() {
    return {
      activeName: '',
      menuData: [],
      // loading: false,
      dialogTableVisible: false,
      formFormatData: {
        key: 'weChatPublicChannel',
        api: {
          editForm: {
          }
        },
        formData: {
          img: '',
          wechat: '',
          app: '',
          qr: 'qrpath',
          link: 'linkpath',
          url: 'url'
        }
      }
    }
  },
  computed: {
    $activeMap() {
      return Object.keys(this.params)
    },
    $activeName() {
      const activeMap = this.$activeMap
      return activeMap.includes(this.activeName)
    },
    $path() {
      return this.isQrcode ? this.params[`${this.activeName}`] : ''
    },
    isQrcode() {
      return ['imgPath', 'weChatQr', 'appQr'].includes(this.activeName)
    },
    getPath() {
      return function(path) {
        return path
      }
    },
    params() {
      return this.updateConfig.params || {}
    },
    weChatQr() {
      return this.params.weChatQr || this.formFormatData.formData.wechat
    },
    appQr() {
      return this.params.appQr || this.formFormatData.formData.app
    },
    imgPath() {
      return this.params.imgPath || this.formFormatData.formData.img
    },
    qrUrl() {
      return this.params.qrUrl || this.formFormatData.formData.qr
    },
    linkUrl() {
      return this.params.linkUrl || this.formFormatData.formData.link
    },
    url() {
      return this.params.url || this.formFormatData.formData.url
    }
  },
  created() {

  },
  components: {},
  methods: {
    // getterData() {
    //   const {
    //     api: {
    //       getters
    //     },
    //     params = {}
    //   } = this.updateConfig
    //   getters(params).then((response) => {
    //     const {
    //       data: {
    //         data: msgData = {}
    //       }
    //     } = response
    //     console.log(msgData)
    //   })
    // },
    handleClipboard(text, event) {
      clipboard(text, event)
    },
    toggle() {
      this.dialogTableVisible = !this.dialogTableVisible
      if (this.dialogTableVisible) {
        // this.getterData()
        // this.loading = true
      }
    },
    output() {
      if (Object.prototype.toString.call(this.changeEvt) === '[object Function]') {
        this.changeEvt([], this.updateConfig.bindKey)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.choose-userlist {
  font-size: 14px;
  margin-bottom: 10px;

  /deep/ .pagination-content .el-input {
    width: 100px;
  }

  .tag-list .el-tag {
    width: auto;
    white-space: nowrap;
    text-overflow: ellipsis;

    &+.el-tag {
      margin-left: 5px;
    }
  }

  .wlm-dialog-main {
    max-height: 520px;
  }

  /deep/ .is-horizontal {
    display: none;
  }

  /deep/ .el-scrollbar__view {
    font-size: 16px;
  }

}
</style>
